<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .bw1{
            width: 150px;
            height: 150px;
            background-color: yellowgreen;
            /* border: 1px solid ; */
        }
        .bw2{
            width: 350px;
            height: 350px;
            background-color: tomato;
            /* border: 1px solid ; */
        }
        .bw2{
            width: 350px;
            height: 350px;
            background-color: rgb(34, 59, 202);
            /* border: 1px solid ; */
        }
    </style>
</head>
<body>
    <div class="bw1">xxx</div>

    <script>
    /* 
        通过js修改div元素样式
     */    
    const divObj =  document.querySelector("div")
    // console.log(divObj)
    divObj.onclick = function(){
        // this.style.backgroundColor = 'red';
        // this.style.border ="3px solid"
        // this.style.fontSize='30px'

        /* 
            元素的class属性比较特殊，不叫class，叫className
            如果一个元素应用多个样式的时候，他会加载最后一个样式.
            
         */
        this.className = 'bw2 bw1 bw3'
        // console.log(this.className);
        // console.log(this.class);
    }
    </script>
</body>
</html>